<template>
  <div class="page-container">
	
	<div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
		<el-form :inline="true" :size="size">
			<el-form-item>
				<el-button-group>
				<el-tooltip content="刷新" placement="top">
					<el-button icon="fa fa-refresh" @click="findPage(null)">刷新</el-button>
				</el-tooltip>
				<el-tooltip content="列显示" placement="top">
					<el-button icon="fa fa-filter" @click="displayFilterColumnsDialog">列显示</el-button>
				</el-tooltip>
				</el-button-group>
			</el-form-item>
		</el-form>
		<!--表格显示列界面-->
		<table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns" 
			@handleFilterColumns="handleFilterColumns"> 
		</table-column-filter-dialog>
	</div>
	<!--表格内容栏-->
	<kt-table :height="350" :data="pageResult" :columns="filterColumns" @findPage="findPage"  @handleEdit="handleEdit">
	</kt-table>
  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput"
import KtTable from "@/views/Core/KtTable"
import KtButton from "@/views/Core/KtButton"
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
import { format } from "@/utils/datetime"

export default {
	components:{
		PopupTreeInput,
		KtTable,
		KtButton,
		TableColumnFilterDialog
	},
	data() {
		return {
			size: 'small',
			columns: [],
			filterColumns: [],
			pageRequest: { pageNum: 1, pageSize: 10 },
			pageResult: {"pageNum":1,"pageSize":10,"totalSize":0,"totalPages":0,"content":[]},
			operation: false, // true:新增, false:编辑
			editLoading: false,
			
		}
	},
	methods: {
		// 获取分页数据
		findPage: function (data) {
			var me = this;
			if(data !== null && data !== undefined) {
				me.pageRequest = data
			}
			console.log(me.pageRequest);
			let req = {
				"curPage":me.pageRequest.pageNum,
				"limit":me.pageRequest.pageSize,
			}
			debugger;
			this.$api.order.findPage(req).then((res) => {
				if(res.code != 200) {
					this.$message({
					message: res.msg,
					type: 'error'
					})
				} else {
					me.pageResult.pageNum = res.page.currPage;
					me.pageResult.pageSize = res.page.pageSize;
					me.pageResult.totalSize = res.page.totalCount;
					me.pageResult.totalPages = res.page.totalPage;
					me.pageResult.content = res.page.list;
					console.log(me.pageResult)
				}
			}).then(data!=null?data.callback:'')
		},

		// 跳转查看界面
		handleEdit: function (params) {
			var dataForm = Object.assign({}, params.row);
			let req = {"id":dataForm.id}
			debugger;
			this.$api.order.findbyid(req).then((res) => {
				if(res.code != 200) {
					this.$message({
					message: res.msg,
					type: 'error'
					})
				} else {
					console.log(res);
				}
			})
		},
		// 时间格式化
      	dateFormat: function (row, column, cellValue, index){
          	return format(row[column.property])
      	},
		//状态格式化
		stateFormat(row, column) {
			console.log(row.orderStatus)
			if (row.orderStatus === 0) {
			return '未支付'
			} else if (row.orderStatus === 1) {
			return '支付成功'
			} else if (row.orderStatus === 2) {
			return '支付失败'
			} else if (row.orderStatus === 3) {
			return '审核中'
			} else if (row.orderStatus === 4) {
			return '审核成功'
			} else if (row.orderStatus === 5) {
			return '审核失败'
			} else if (row.orderStatus === 6) {
			return '待服务'
			} else if (row.orderStatus === 7) {
			return '护士已出发'
			} else if (row.orderStatus === 8) {
			return '服务已完成'
			} 
      	},
		// 处理表格列过滤显示
      	displayFilterColumnsDialog: function () {
			this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      	},
		// 处理表格列过滤显示
      	handleFilterColumns: function (data) {
			this.filterColumns = data.filterColumns
			this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      	},
		// 处理表格列过滤显示
      	initColumns: function () {
			this.columns = [
				{prop:"orderNumber", label:"订单编号", minWidth:100},
				{prop:"hospitalName", label:"医院名称", minWidth:120},
				{prop:"concatUsername", label:"用户姓名", minWidth:120},
				{prop:"concatPhone", label:"手机号", minWidth:100},
				{prop:"serviceTypeName", label:"服务项目", minWidth:100},
                {prop:"orderAmount", label:"服务金额", minWidth:100},
                {prop:"createTime", label:"下单时间", minWidth:100, formatter:this.dateFormat},
                {prop:"orderStatus", label:"订单状态", minWidth:100, formatter:this.stateFormat},
			]
			this.filterColumns = JSON.parse(JSON.stringify(this.columns));
      	},
		setType(){
			this.GLOBAL.setType('5');
		}
	},
	created(){
		this.setType();
	},
    mounted() {
        this.initColumns()
		this.findPage()
	}
}
</script>